<script setup>
import axios from 'axios'
import { defineProps } from 'vue'
import { ref, onMounted } from 'vue'
import { getWebUpgradeInfo, upgradeVersion } from '@/api/LocalUpgrade/main.js'

const props = defineProps({})

const webInfo = ref({})
let webVersion = ref('')

const getList = async () => {
  const regex = /v\d+\.\d+/g
  const res = await getWebUpgradeInfo()

  const { oldVersion, newVersion } = res.data
  webInfo.value.oldVersion = regex.exec(oldVersion)[0]

  webInfo.value.newVersion = newVersion
    .map((v) => {
      const match = v.match(regex)
      return match ? match[0] : null // 如果没有匹配结果，返回 null
    })
    .filter((v) => v !== null) // 过滤掉 null 值

  console.log(webInfo.value)
}

const handleUpdate = async (name) => {
  if (!webVersion.value) return ElMessage.error('请选择要升级的版本')
  const res = await upgradeVersion(name, webVersion.value)

  console.log(res)
}

onMounted(async () => {
  getList()
})
</script>

<template>
  <div class="showData-container">
    <div class="item">
      <div class="title">
        <p>模块</p>
        <p>当前版本</p>
        <p>将要升级的版本</p>
        <p>操作</p>
      </div>
      <div class="content">
        <div>web升级</div>
        <div>{{ webInfo?.oldVersion }}</div>
        <div>
          <el-select v-model="webVersion" placeholder="选择版本号" size="small" style="width: 160px">
            <el-option v-for="item in webInfo.newVersion" :key="item" :label="item" :value="item" />
          </el-select>
        </div>
        <div>
          <div class="btn" @click="handleUpdate('web')">升级</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.showData-container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  font-size: 14px;
}

.title {
  display: flex;
  > p {
    width: 200px;
    border: 1px solid #ccc;
    text-align: center;
    border-right: none;
    padding: 4px 0;
    background-color: rgba(239, 239, 239, 0.9);
  }
  > p:last-child {
    border-right: 1px solid #ccc;
  }
}

.content {
  display: flex;
  > div {
    width: 200px;
    border: 1px solid #ccc;
    text-align: center;
    border-top: none;
    border-right: none;
    padding: 4px 0;
  }
  > div:last-child {
    border-right: 1px solid #ccc;
  }
}
.btn {
  width: 50px;
  height: 24px;
  border-radius: 4px;
  margin-left: 20px;
  background-color: #4095e5;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
}

.top_2 {
  width: 100%;
  > div {
    width: 120px;
  }
}
</style>
